<template>
    <button class="rx-btn" :type="type" @click="onClick"><slot></slot></button>
</template>

<script>
export default {
  name: "rx-button",
  props: {
    type: {
      type: String,
      default: "default"
    }
  },
  methods: {
    onClick() {
      this.$emit("click");
    }
  }
};
</script>

<style lang="scss">
/*按钮*/
.rx-btn {
  display: inline-block;
  box-sizing: border-box;
  outline: none;
  text-align: center;
  margin: 0;
  padding: 8px 14px;
  font-size: 14px;
  border: 1px solid #fff;
  line-height: 1em;

  vertical-align: middle;
  cursor: pointer;
  border-radius: 4px;
  white-space: nowrap;
  user-select: none;
  transition: background-color 0.5s, border 0.5s, color 0.5s;

  &[disabled] {
    cursor: not-allowed !important;
    border: 1px solid #C1C4D6 !important;
    color: #A5AAC7 !important;
    background-color: #fff !important;
  }
  //遍历状态
  $types: (
    (
      type: "default",

      color: #6575F6,
      bgcolor: #EAECFF,
      borderColor: #C8CEFF,

      hoverColor:#FFF,
      hoverBgcolor:#6575F6,
      hoverBorderColor:#6575F6,

      activeColor:#FFF,
      activeBgcolor:#4356EC,
      activeBorderColor:#4356EC,

      plaincolor: #333333,
      plainborderColor: #C1C4D6,

      plainhoverColor:#6575F6,
      plainhoverBgcolor:#ffffff,
      plainhoverBorderColor:#C8CEFF,

      plainactiveColor:#6575F6,
      plainactiveBgcolor:#EAECFF,
      plainactiveBorderColor:#6575F6,
    ),
    (
      type: "primary",

      color: #fff,
      bgcolor: #6575F6,
      borderColor: #6575F6,

      hoverColor:#FFF,
      hoverBgcolor:#4356EC,
      hoverBorderColor:#4356EC,

      activeColor:#FFF,
      activeBgcolor:#2838B9,
      activeBorderColor:#2838B9
    ),
    (
      type: "danger",

      color: #FF8D8D,
      bgcolor: #FFF1F1,
      borderColor: #FFD7D7,

      hoverColor:#FFF,
      hoverBgcolor:#FF8D8D,
      hoverBorderColor:#FF8D8D,

      activeColor:#FFF,
      activeBgcolor:#F16969,
      activeBorderColor:#F16969,

      plaincolor: #FF8D8D,
      plainborderColor: #FFD7D7,

      plainhoverColor:#FF8D8D,
      plainhoverBgcolor:#ffffff,
      plainhoverBorderColor:#FFD7D7,

      plainactiveColor:#FF8D8D,
      plainactiveBgcolor:#FFF1F1,
      plainactiveBorderColor:#FF8D8D,
    ),
    (
      type: "spec1",

      color: #72D2F1,
      bgcolor: #EEFBFF,
      borderColor: #C7F1FF,

      hoverColor:#FFF,
      hoverBgcolor:#72D2F1,
      hoverBorderColor:#72D2F1,

      activeColor:#FFF,
      activeBgcolor:#4FBADC,
      activeBorderColor:#4FBADC,

       plaincolor: #72D2F1,
      plainborderColor: #C7F1FF,

      plainhoverColor:#72D2F1,
      plainhoverBgcolor:#ffffff,
      plainhoverBorderColor:#C7F1FF,

      plainactiveColor:#72D2F1,
      plainactiveBgcolor:#EEFBFF,
      plainactiveBorderColor:#72D2F1,
    ),
    (
      type: "spec2",

      color: #77B5FE,
      bgcolor: #EFF7FF,
      borderColor: #CCE3FE,

      hoverColor:#FFF,
      hoverBgcolor:#77B5FE,
      hoverBorderColor:#77B5FE,

      activeColor:#FFF,
      activeBgcolor:#4F91DE,
      activeBorderColor:#4F91DE,

       plaincolor: #77B5FE,
      plainborderColor: #CCE3FE,

      plainhoverColor:#77B5FE,
      plainhoverBgcolor:#ffffff,
      plainhoverBorderColor:#CCE3FE,

      plainactiveColor:#77B5FE,
      plainactiveBgcolor:#EFF7FF,
      plainactiveBorderColor:#77B5FE,
    )
  );

  @for $i from 1 through length($types) {
    $item: nth($types, $i);

    &[type="#{map-get($item, type)}"] {
      color: map-get($item, color);
      background-color: map-get($item, bgcolor);

      svg.rx-icon[name="rxtoast-#{map-get($item, type)}"] {
        display: inline;
      }
    }
        // 删除
    &[type="#{map-get($item, type)}"]{
        color: map-get($item, color);
        background-color: map-get($item, bgcolor);
        border-color: map-get($item, borderColor);
        
        &:hover {
            color: map-get($item, hoverColor);
            background-color: map-get($item, hoverBgcolor);
            border-color: map-get($item, hoverBorderColor);
        }

        &:active {
            color: map-get($item, activeColor);
            background-color: map-get($item, activeBgcolor);
            border-color: map-get($item, activeBorderColor);
        }
            // 朴素按钮
        &[plain] {
            color: map-get($item, plaincolor);
            background-color: #ffffff;
            border-color: map-get($item, plainborderColor);
            
            &:hover {
                color: map-get($item, plainhoverColor);
                background-color: map-get($item, plainhoverBgcolor);
                border-color: map-get($item, plainhoverBorderColor);
            }

            &:active {
                color: map-get($item, plainactiveColor);
                background-color: map-get($item, plainactiveBgcolor);
                border-color: map-get($item, plainactiveBorderColor);
            }
        }
    }
   
  }
}
</style>
